import avatar from "./images/avatar.png";
import "./b.css";
import classNames from "classnames";
import React from "react";

const state = {
    // hot: 热度排序  time: 时间排序
    tabs: [
        {
            id: 1,
            name: "热度",
            type: "hot",
        },
        {
            id: 2,
            name: "时间",
            type: "time",
        },
    ],
    active: "hot",
    list: [
        {
            id: 1,
            author: "刘德华",
            comment: "给我一杯忘情水",
            time: new Date("2021-10-10 09:09:00"),
            // 1: 点赞 0：无态度 -1:踩
            attitude: 1,
        },
        {
            id: 2,
            author: "周杰伦",
            comment: "哎哟，不错哦",
            time: new Date("2021-10-11 09:09:00"),
            // 1: 点赞 0：无态度 -1:踩
            attitude: 0,
        },
        {
            id: 3,
            author: "五月天",
            comment: "不打扰，是我的温柔",
            time: new Date("2021-10-11 10:09:00"),
            // 1: 点赞 0：无态度 -1:踩
            attitude: -1,
        },
    ],
    txt: "",
};

class App extends React.Component {
    state = state;
    render() {
        return (
            <div className="App">
                <div className="comment-container">
                    {/* 评论数 */}
                    <div className="comment-head">
                        <span>{state.list.length} 评论</span>
                    </div>
                    {/* 排序 */}
                    <div className="tabs-order">
                        <ul className="sort-container">
                            <li
                                className={classNames({
                                    on: state.active === "hot",
                                })}>
                                按热度排序
                            </li>
                            <li
                                className={classNames({
                                    on: state.active === "time",
                                })}>
                                按时间排序
                            </li>
                        </ul>
                    </div>

                    {/* 添加评论 */}
                    <div className="comment-send">
                        <div className="user-face">
                            <img className="user-head" src={avatar} alt="" />
                        </div>
                        <div className="textarea-container">
                            <textarea
                                cols="80"
                                rows="5"
                                placeholder="发条友善的评论"
                                className="ipt-txt"
                                value={this.state.txt}
                                onChange={(e) => {
                                    this.setState({
                                        txt: e.target.value,
                                    });
                                }}
                            />
                            <button
                                className="comment-submit"
                                onClick={() => {
                                    let newList = [...this.state.list];
                                    newList.push({
                                        id: this.state.list.at(-1).id + 1,
                                        author: "五月天",
                                        comment: this.state.txt,
                                        time: new Date(),
                                        // 1: 点赞 0：无态度 -1:踩
                                        attitude: 0,
                                    });
                                    this.setState({
                                        list: newList,
                                    });
                                }}>
                                发表评论
                            </button>
                        </div>
                        <div className="comment-emoji">
                            <i className="face"></i>
                            <span className="text">表情</span>
                        </div>
                    </div>

                    {/* 评论列表 */}
                    {this.state.list.map((item) => {
                        return (
                            <div className="comment-list" key={item.id}>
                                <div className="list-item">
                                    <div className="user-face">
                                        <img
                                            className="user-head"
                                            src={avatar}
                                            alt=""
                                        />
                                    </div>
                                    <div className="comment">
                                        <div className="user">
                                            {item.author}
                                        </div>
                                        <p className="text">{item.comment}</p>
                                        <div className="info">
                                            <span className="time">
                                                {item.time.toLocaleDateString()}
                                            </span>

                                            <span
                                                className={classNames("like", {
                                                    liked: item.attitude === 1,
                                                })}>
                                                <i className="icon" />
                                            </span>
                                            <span
                                                className={classNames("hate", {
                                                    hated: item.attitude === -1,
                                                })}>
                                                <i className="icon" />
                                            </span>
                                            <span
                                                className="reply btn-hover"
                                                onClick={() => {
                                                    let newList =
                                                        this.state.list.filter(
                                                            (k) =>
                                                                k.id !== item.id
                                                        );
                                                    this.setState({
                                                        list: newList,
                                                    });
                                                }}>
                                                删除
                                            </span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        );
                    })}
                </div>
            </div>
        );
    }
}

export default App;
